<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="false">
			<block slot="content">直播竞拍</block>
		</cu-custom>
		<view class="cu-bar search  w100 bg-white">
			<view class="search-form text-center align-center justify-center round" text-center>
				<view class="iconfont icon-sousuo text-sm margin-left"></view>
				<input  :adjust-position="false" type="text" placeholder="搜索直播" confirm-type="search"></input>
			</view>
		</view>
		<view class="padding bg-white overflow">
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" indicator-color="#8799a3" indicator-active-color="#0081ff" style="height: 320upx;min-height: auto;">
				<swiper-item v-for="(item, index) in adv" :key="index" @tap="goAdv(item.jump_link)">
					<image :src="item.cover" mode="aspectFit" class="radius10 default-view"></image>
				</swiper-item>
			</swiper>
		</view>

		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'cur text-'+theme:''" v-for="(item,index) in listObj" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>

		<view v-for="(item,index) in listObj" :key="index" v-if="index==TabCur" class="bg-white overflow solid-top">
			<block v-for="(live, i) in item.list" :key="i">
				<LiveView :value="live" :styles="'list2'"></LiveView>
			</block>

			<view class="cu-load margin-center" :class="item.loading?'loading':'over'"></view>
		</view>

		<Foot></Foot>
		<Navbar PageCur="live"></Navbar>
	</view>
</template>

<script>
	import LiveView from '@/components/shop/LiveView.vue'
	import Navbar from '@/components/default/Navbar.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		name: "index",
		components: {
			LiveView,
			Navbar,
			Foot,
		},
		data() {
			return {
				TabCur: 0,
				listObj: [{
					title: '推荐',
					type: 0,
					page: 1,
					hasMore: true,
					loading: false,
					list: []
				},{
					title: '直播中',
					type: 1,
					page: 1,
					hasMore: true,
					loading: false,
					list: []
				}, {
					title: '预告',
					type: 2,
					page: 1,
					hasMore: true,
					loading: false,
					list: []
				}, {
					title: '回播',
					type: 3,
					page: 1,
					hasMore: true,
					loading: false,
					list: []
				}, ],
				theme: this.$config.THEME(),
				adv: []
			}
		},
		onLoad(options) {
			this.getAdv()
			this.$nextTick(function() {
				uni.startPullDownRefresh({})
			})
		},
		onShow() {},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = parseInt(e.currentTarget.dataset.id)
					this.getList(this.TabCur)
				}
			},
			getAdv() {
				this.$http
					.get('in_shop_adv', {
						location: 'index_live'
					})
					.then((response) => {
						console.log(response)
						this.adv = response.data.data.index_live
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getList(index) {
				let obj = this.listObj[index]
				if (!obj.hasMore || obj.loading) return
				this.listObj[index].loading = true
				this.$http
					.get('marketing_auction_index', {
						type: obj.type,
						page: obj.page,
					})
					.then((response) => {
						let list = this.listObj[index].list
						if (response.data.data.length > 0) {
							list = list.concat(response.data.data)
						} else {
							this.listObj[index].hasMore = false
						}
						this.listObj[index].loading = false
						this.listObj[index].list = list
						this.listObj[index].page += 1
						console.log(this.listObj)
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
			goAdv(href) {
				if (href) {
					if (href.slice(0, 4) == 'http') {
						window.location.href = href
					} else {
						uni.navigateTo({
							url: href
						})
					}
				}
			},
		},
		onPullDownRefresh() {
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			this.listObj[this.TabCur].hasMore = true
			this.getList(this.TabCur)
			// this.getInfoData()
		},
		onReachBottom() {
			this.getList(this.TabCur)
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/live/index'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-带货直播',
				imageUrl: '',
				path: path
			}
		},
	}
</script>

<style>
</style>
